<!-- 参数设置 -->
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import { QueryInfo, SaveInfo } from "../../api/index";
import { InfoFilled } from "@element-plus/icons-vue";

import Login from "../Login/Index.vue";
import UpdatePassword from "./UpdatePassword.vue";
import ResetPassword from "./ResetPassword.vue";

const props = defineProps(["lineValue", "systemData", "mailData"]);

const systemInfo = ref({});
watch(
  () => props.systemData,
  (newVal, oldVal) => {
    systemInfo.value = JSON.parse(JSON.stringify(newVal));
  }
);

const mailInfo = ref({});
watch(
  () => props.mailData,
  (newVal, oldVal) => {
    mailInfo.value = newVal;
  }
);

const emit = defineEmits(["updateSystem"]);
const deviceList = ref<any[]>([]);
const isEdit = ref(false);
const loginRef = ref();

const onEdit = () => {
  //调出验证窗口
  loginRef.value.open("EditFeederInfo");
};
const onSave = () => {
  const post = {
    InputStr: "OperType=SaveFeederInfo",
    JsonStr: deviceList.value,
  };
  SaveInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    ElMessage.success(res.msg);
    isEdit.value = false;
    getDeviceInfo();
  });
};

const getDeviceInfo = () => {
  QueryInfo({
    InputStr: "OperType=GetFeederInfo",
    JsonStr: [],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    const temp = JSON.parse(JSON.stringify(res.data.FeederInfo));
    deviceList.value = temp.map((item: any) => {
      return {
        ...item,
        Activity: JSON.parse(item.Activity),
      };
    });
  });
};

//系统参数
const isEditSystem = ref(false);
const editSystem = () => {
  //调出验证窗口
  loginRef.value.open("EditSystemInfo");
};
let systemForm = ref(systemInfo);
const saveSystem = () => {
  SaveInfo({
    InputStr: "OperType=SaveSystemInfo",
    JsonStr: [systemForm.value],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    isEditSystem.value = false;
    ElMessage.success(res.msg);
    querySystem();
  });
};
const querySystem = () => {
  QueryInfo({
    InputStr: "OperType=GetSystemInfo",
    JsonStr: [],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    systemForm.value = JSON.parse(JSON.stringify(res.data[0]));
    emit("updateSystem", systemForm.value);
  });
};

//邮件
const isEditEmail = ref(false);
const editEmail = () => {
  //调出验证窗口
  loginRef.value.open("EditMailInfo");
};
let emailForm = ref<any>(mailInfo);
const saveEmail = () => {
  //格式化日志目录
  const { FilePath } = emailForm.value;
  //将路径中的:\替换为:/
  const newPath = FilePath.replace(/\\/g, "$");
  SaveInfo({
    InputStr: "OperType=SaveMailInfo",
    JsonStr: [
      {
        ...emailForm.value,
        FilePath: newPath,
      },
    ],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    isEditEmail.value = false;
    ElMessage.success(res.msg);
    queryEmail();
  });
};
const queryEmail = () => {
  QueryInfo({
    InputStr: "OperType=GetMailInfo",
    JsonStr: [],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    emailForm.value = JSON.parse(JSON.stringify(res.data[0]));
    const { FilePath } = emailForm.value;
    //将路径中的:\替换为:/
    const newPath = FilePath.replace(/\$/g, "\\");
    // console.log(`output->newPath`, newPath)
    emailForm.value.FilePath = newPath;
  });
};

//选择文件
const openFile = async () => {
  //@ts-ignore
  emailForm.value.FilePath = await window.electronAPI.openDirectory();
};

const brandList = ref([]);
//品牌下拉框
const getBrandList = () => {
  QueryInfo({
    InputStr: "OperType=GetFeederBrand",
    JsonStr: [],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    brandList.value = res.data;
  });
};

onMounted(() => {
  getBrandList();
  getDeviceInfo();
});

const closeLogin = (type: string) => {
  if (type.includes("System")) {
    isEditSystem.value = true;
  }
  if (type.includes("Mail")) {
    isEditEmail.value = true;
  }
  if (type.includes("Feeder")) {
    isEdit.value = true;
  }
};

//改密
const updateRef = ref();
const changePw = () => {
  updateRef.value.open();
};

//重置
const resetRef = ref();
const resetPw = () => {
  resetRef.value.open();
};
</script>

<template>
  <div class="flex search">
    <div class="row-item w-2/5">
      <!-- 系统名称 -->
      <div class="system-box">
        <div class="flex items-center">
          <p class="mr-20">系统参数</p>
          <div>
            <el-button type="success" @click="editSystem">编辑</el-button>
            <el-button
              type="warning"
              :disabled="!isEditSystem"
              @click="saveSystem"
              >保存</el-button
            >
            <el-button type="primary" @click="querySystem" class="ml-4"
              >查询</el-button
            >
          </div>
        </div>
        <!-- 系统参数 -->
        <el-form
          class="my-form email-form mt-4"
          :model="systemForm"
          label-width="175"
        >
          <el-form-item label="系统名称">
            <el-input
              v-model="systemForm.SystemName"
              placeholder="请输入系统名称"
              :disabled="!isEditSystem"
            />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input
              v-model="systemForm.CustName"
              placeholder="请输入客户名称"
              :disabled="!isEditSystem"
            />
          </el-form-item>
          <el-form-item label="厂区">
            <div class="flex flex-box">
              <el-input
                v-model="systemForm.Factory"
                placeholder="请输入厂区"
                style="width: 150px"
                :disabled="!isEditSystem"
              />
              <span class="ml-5 mr-2">楼层</span>
              <el-input
                v-model="systemForm.Floor"
                placeholder="请输入"
                style="width: 100px"
                :disabled="!isEditSystem"
              />
              <span class="ml-6 mr-2">线别</span>
              <el-input
                v-model="systemForm.Line"
                placeholder="请输入"
                style="width: 100px"
                :disabled="!isEditSystem"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 邮件设置 -->
      <div class="email-box mt-2">
        <div class="flex items-center">
          <p class="mr-20">邮件参数</p>
          <div>
            <el-button type="success" @click="editEmail">编辑</el-button>
            <el-button
              type="warning"
              :disabled="!isEditEmail"
              @click="saveEmail"
              >保存</el-button
            >
            <el-button type="primary" @click="queryEmail">查询</el-button>
          </div>
        </div>
        <el-form
          class="my-form email-form mt-4"
          :model="emailForm"
          label-width="175"
        >
          <el-form-item label="账号">
            <el-input v-model="emailForm.MailFrom" disabled />
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="emailForm.Password"
              show-password
              disabled
            />
          </el-form-item>
          <el-form-item label="发送服务器">
            <el-input v-model="emailForm.Host" disabled />
          </el-form-item>
          <el-form-item label="服务器端口">
            <el-input v-model="emailForm.Port" disabled />
          </el-form-item>
          <el-form-item label="收件人">
            <el-input
              v-model="emailForm.MailTo"
              type="textarea"
              class="my-textarea"
              rows="2"
              :disabled="!isEditEmail"
            />
          </el-form-item>
          <el-form-item label="抄送人">
            <el-input
              type="textarea"
              class="my-textarea"
              rows="2"
              v-model="emailForm.CCTo"
              :disabled="!isEditEmail"
            />
          </el-form-item>
          <el-form-item label="邮件主题">
            <el-input v-model="emailForm.Subject" :disabled="!isEditEmail" />
          </el-form-item>
          <el-form-item label="日志目录">
            <div class="flex">
              <el-input
                v-model="emailForm.FilePath"
                placeholder="请选择日志目录"
                style="width: 382px"
                :disabled="!isEditEmail"
              />
              <el-button
                class="ml-4"
                type="warning"
                :disabled="!isEditEmail"
                @click="openFile"
                >请选择</el-button
              >
            </div>
          </el-form-item>
          <!-- <el-form-item label="发送周期">
            <el-select v-model="emailForm.CT" style="width: 500px">
              <el-option label="30分钟" value="30" />
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>
      <!-- 改密&重置 -->
      <div class="reset-box mt-2">
        <div class="flex items-center">
          <p class="mr-20">密码修改</p>
          <div>
            <el-button type="success" @click="changePw" class="mr-2"
              >改密</el-button
            >
            <el-button type="primary" @click="resetPw">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="row-item w-3/5">
      <div class="flex items-center justify-between">
        <p class="mr-3">供料器参数</p>
        <el-form :inline="true" class="my-form device-form mr-3">
          <el-form-item>
            <el-button type="success" @click="onEdit" class="mr-2"
              >编辑</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="warning"
              :disabled="!isEdit"
              @click="onSave"
              class="mr-2"
              >保存</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button class="-mr-3" type="primary" @click="getDeviceInfo">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box mt-2">
        <el-table :data="deviceList" height="740">
          <el-table-column
            label="名称"
            prop="Name"
            align="center"
            width="90"
            show-overflow-tooltip
          />
          <el-table-column
            label="编码"
            prop="Number"
            align="center"
            width="110"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="品牌" prop="Brand" width="120">
            <template #default="scope">
              <el-select v-model="scope.row.Brand" :disabled="!isEdit">
                <el-option
                  v-for="(item, index) in brandList"
                  :key="index"
                  :label="item.Label"
                  :value="item.Value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="IP" width="210">
            <template #default="scope">
              <el-input v-model="scope.row.IP" :disabled="!isEdit" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="站别"
            prop="Station"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="OPID"
            label="员工工号"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="机种"
            prop="Model"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="启用"
            width="80"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-switch
                v-model="scope.row.Activity"
                :disabled="!isEdit"
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Login ref="loginRef" @success="closeLogin" />
    <UpdatePassword ref="updateRef" />
    <ResetPassword ref="resetRef" />
  </div>
</template>
<style lang="less" scoped>
.my-form .el-input {
  --el-input-width: 500px;
}

.my-form .el-form-item {
  margin-bottom: 0;
}

.email-form .el-form-item {
  margin-bottom: 10px;
}

:deep(.my-form .el-form-item__label) {
  font-size: inherit;
  color: inherit;
  margin-top: 4px;
  color: #799ac1;
}
.flex-box {
  span {
    font-size: 22px;
    margin-top: 4px;
    color: #799ac1;
  }
}

:deep(.table-box .el-input__inner) {
  text-align: center;
}
:deep(.my-textarea .el-textarea__inner) {
  width: 500px;
  background: #1c324f;
  box-shadow: none;
  color: #799ac1;
  font-size: 1.3rem;
}

.table-box {
  :deep(.el-table) {
    font-size: 1.3rem;
    background-color: #141c36;
  }

  :deep(.el-table__empty-block) {
    background-color: #141c36;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #143452;
    color: #79a0c9;
    font-weight: 600;
  }

  :deep(.el-table .el-table__cell) {
    background: #141c36;
    color: #799ac1;
    border-bottom: 0;
    padding: 0.5rem 0;
  }

  :deep(
      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
    ) {
    background-color: #1f4465;
  }

  :deep(.el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    height: 2.6rem;
    color: #799ac1;
    font-size: 1.3rem;
  }

  :deep(.el-table) {
    --el-table-bg-color: none;
  }

  :deep(.el-table tbody .el-table__cell) {
    height: 20px;
    padding: 7px 0;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #799ac1;
  }
}

:deep(.my-form .el-input__wrapper) {
  background: #1c324f;
  box-shadow: none;
  height: 2.6rem;
}

:deep(.my-form .el-input__inner) {
  height: 2.6rem;
  color: #799ac1;
  font-size: 1.3rem;
}

.my-form {
  :deep(.el-button) {
    font-size: 1.2rem;
    height: 42px;
    padding: 0 20px;
  }
  :deep(.el-date-editor .el-range-input) {
    font-size: 1.3rem;
  }
  :deep(.el-date-editor .el-range-separator) {
    color: inherit;
  }
  :deep(.el-date-editor .el-range__icon) {
    font-size: 20px;
  }
}
.line-form {
  :deep(.el-form-item) {
    margin-right: 0;
  }
  :deep(.el-button.my-save-btn) {
    margin-left: 24px;
  }
}
.device-form {
  :deep(.el-form-item) {
    margin-right: 18px;
  }
  :deep(.el-form-item:last-child) {
    margin-right: 0;
  }
}
.table-box {
  :deep(.el-button--danger.is-plain.is-disabled) {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
    color: #fff;
  }
  :deep(.el-table__empty-text) {
    color: #79a0c9;
  }
  :deep(.el-table .cell) {
    line-height: 28px;
  }
  :deep(.el-table__inner-wrapper::before) {
    display: none;
  }
}
.email-box,
.system-box {
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }
  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    background: #1c324f;
    box-shadow: none;
  }
}
</style>
